<template>
    <div class="person">
        <h2>水温：{{ temp }}℃</h2>
        <h2>水位：{{ height }}厘米</h2>
        <button @click="changeTemp">水温+10</button>
        <button @click="changeHeight">高度+10</button>
    </div>
</template>


<script lang="ts" setup name="Person">
    
    import {watch, ref, watchEffect} from 'vue'

    let temp = ref(10)
    let height = ref(0)

    function changeTemp() {
        temp.value += 10
    }
    function changeHeight() {
        height.value += 10
    }

    // 功能：在水温高于60度或高度高于80厘米时，进行告警
    // 使用watch实现
    // watch([temp, height], (newValue) => {
    //     let [newTemp, newHeight] = newValue
    //     if(newTemp >= 60 || newHeight >= 80) {
    //         console.log("触发告警!!!")
    //     }
    // })

    // 使用watchEffect实现(watchEffect会自动监视方法体中使用的属性的变化)
    watchEffect(() => {
        if(temp.value >= 60 || height.value >= 80) {
            console.log("触发告警!!!")
        }
    })
</script>


<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>